@charset "UTF-8";
/*! 加了"!"后，压缩格式下的注释也会依然存在
 * contents
 *
 * variables...............变量集中储存文件
 *
 * screen.scss...........针对当前站点的样式修饰
 * 
 * basic.scss...........清除默认样式
 * 
 * extend.scss...........选择器继承
 * 
 * mixin.scss...........混合
 * 
 */
@import "variables", "basic", "extend", "mixin";


/* 通用控制器 */
.show {
	display: block;
}
.hide {
	display: none;
}


/* header */
header {
	position: fixed;
	top: 0;
	z-index: 100;
	width: 100%;
	height: 70px;
	background-color: $dark-background;
	.header-content {
		overflow: hidden;
		width: 1200px;
		margin: 0 auto;
		line-height: 70px;
		.logo {
			float: left;
			height: 50px;
			margin: 10px 16px 0 0;
		}
		.address {
			overflow: hidden;
			float: left;
			color: $light-color;
			.address-icon {
				float: left;
				height: 14px;
				margin: 28px 2px 0 0;
			}
			.address-name {
				float: left;
				font-size: $smaller-font-size;
				margin-right: 120px;
			}
		}
		nav {
			overflow: hidden;
			float: left;
			.nav-item {
				color: #fff;
				padding: 0 32px;
				float: left;
				&.active {
					color: $light-color;
					background-color: $active-background;
				}
			}
		}
	}
}
.header-blank {
	padding-bottom: 70px;
}


/* 回到顶部 */
.back-to-top {
	position: fixed;
	bottom: 120px;
	right: 60px;
	z-index: 11;
	display: block;
	border: 1px solid $base-border-color;
	width: 50px;
	height: 50px;
	background-color: #fff;
	img {
		width: 24px;
		height: 14px;
		margin: 18px 13px;
	}
}


/* footer */
footer {
	.footer-box {
		background-color: $base-background;
		padding: 32px 0;
		.footer-content {
			overflow: hidden;
			width: 1200px;
			margin: 0 auto;
			.item {
				float: left;
				margin-right: 120px;
				&:last-child {
					margin-right: 0;
				}
				.name {
					font-size: $bigger-font-size;
					margin-bottom: 24px;
				}
				.work-time, .email, .address {
					font-size: $smaller-font-size;
				}
				.address {
					margin-top: 12px;
				}
				.phone {
					color: $light-color;
					font-size: $biggest-font-size;
					margin-top: 16px;
				}
				img {
					width: 140px;
					height: 140px;
				}
			}
		}
	}
	.keep-on-record {
		background-color: $dark-background;
		text-align: center;
		color: #fff;
		font-size: $smaller-font-size;
		padding: 30px 0;
	}
}


/*  modal */
.modal {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 12;
	display: none;
	.mask {
		background: rgba(0, 0, 0, 0.6);
		height: 100vh;
	}
	.info {
		position: absolute;
		top: 30%;
		left: 50%;
		margin-left: -227px;
		width: 454px;
		border-radius: 3px;
	}
}
/* app */
.app-modal {
	.info {
		background-color: $dark-background;
		box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.4);
		border-radius: 3px;
		.logo {
			height: 48px;
			margin: 24px 0 8px 32px;
		}
		.title {
			color: $light-color;
			text-align: center;
		}
		.qr-code {
			text-align: center;
			margin: 16px 0 56px 0;
			img {
				width: 140px;
				height: 140px;
			}
		}
	}
}

/* 手机验证 */
.validate-modal {
	.info {
		background-color: #fff;
		padding: 0 40px;
		font-size: $smaller-font-size;
		.title {
			text-align: center;
			padding: 24px 0;
			font: {
				size: $bigger-font-size;
				weight: bold;
			}
		}
		.phone-number-item {
			overflow: hidden;
			margin-bottom: 12px;
			.name {
				float: left;
				line-height: 44px;
				margin-right: 12px;
			}
			.get-identify-code {
				float: left;
				line-height: 44px;
				width: 120px;
				background-color: $base-background;
				padding-right: 16px;
				text-align: right;
				color: $light-color;
				cursor: pointer;
			}
			input {
				float: left;
				@include inp($width: 200px);
			}
		}
		.identify-code-item {
			overflow: hidden;
			margin: 12px 0 36px 0;
			.name {
				float: left;
				line-height: 44px;
				margin-right: 12px;
			}
			input {
				float: left;
				@include inp($width: 320px);
			}
		}
		button {
			@include btn($width: 360px);
		}
		.notice {
			color: $deepgray-color;
			font-size: $small-font-size;
			padding: 16px 0 28px 0;
			text-align: center;
			a {
				color: $light-color;
			}
		}
	}
}


/* 首页 */
.index {
	width: 1200px;
	margin: 0 auto;
	.swiper-container {
		.swiper-slide {
			img {
				width: 100%;
				height: 400px;
			}
		}
		.swiper-button-next, .swiper-button-prev {
			img {
				width: 13px;
				height: 22px;
				margin: 29px 11px;
			}
		}
	}
	.content {
		overflow: hidden;
		margin: 44px 0 80px 0;
		.classify {
			float: left;
			background: $dark-background;
			width: 200px;
			border-radius: 3px;
			// font-weight: bold;
			margin: 2px 40px 0 0;
			.name {
				height: 60px;
				line-height: 60px;
				color: $light-color;
				padding-left: 20px;
			}
			nav {
				.classify-item {
					display: block;
					overflow: hidden;
					color: #fff;
					width: 100%;
					height: 50px;
					line-height: 50px;
					padding-left: 20px;
					.classify-name {
						float: left;
					}
					.active-arrow {
						float: right;
						width: 10px;
						height: 50px;
						background: url(../../img/active-arrow.png) no-repeat center center;
						background-size: 10px;
						display: none;
					}
					&.active {
						background-color: $active-background;
						.active-arrow {
							display: block;
						}
					}
					.icon {
						float: left;
						width: 32px;
						height: 32px;
						margin: 9px 12px 0 0;
					}
					&:nth-child(1) .icon{
						background: url(../../img/photography.png) no-repeat center center;
						background-size: 30px;
					}
					&:nth-child(2) .icon{
						background: url(../../img/guild-hall.png) no-repeat center center;
						background-size: 29px;
					}
					&:nth-child(3) .icon{
						background: url(../../img/dress.png) no-repeat center center;
						background-size: 29px;
					}
					&:nth-child(4) .icon{
						background: url(../../img/yp.png) no-repeat center center;
						background-size: 32px;
					}
					&:nth-child(5) .icon{
						background: url(../../img/decoration.png) no-repeat center center;
						background-size: 30px;
					}
					&:nth-child(6) .icon{
						background: url(../../img/hotel.png) no-repeat center center;
						background-size: 30px;
					}
					&:nth-child(7) .icon{
						background: url(../../img/company.png) no-repeat center center;
						background-size: 30px;
					}
					&:nth-child(8) .icon{
						background: url(../../img/travel.png) no-repeat center center;
						background-size: 27px;
					}
					&:nth-child(9) .icon{
						background: url(../../img/confinement.png) no-repeat center center;
						background-size: 32px;
					}
					&:nth-child(10) .icon{
						background: url(../../img/education.png) no-repeat center center;
						background-size: 30px;
					}
				}
			}
		}
		.business {
			float: left;
			.business-item {
				box-shadow: 0 0 10px 0 rgba(0 ,0, 0, 0.08);
				border-radius: 3px;
				width: 958px;
				height: 342px;
				position: relative;
				margin: 2px 0 24px 0;
				.recommend {
					position: absolute;
					top: 0;
					right: 36px;
					width: 40px;
				}
				.business-info {
					overflow: hidden;
					padding: 24px;
					.business-logo {
						float: left;
						width: 72px;
						height: 72px;
						border-radius: 18px;
						margin-right: 16px; 
					}
					.details {
						float: left;
						.name {
							font-size: $bigger-font-size;
							font-weight: bold;
							margin-bottom: 8px;
						}
						.address-item {
							color: $deepgray-color;
							font-size: $small-font-size;
							overflow: hidden;
							img {
								height: 14px;;
								float: left;
								margin: 3px 8px 0 0;
							}
							.address {
								float: left;
							}
						}
					}
				}
				.img-display {
					overflow: hidden;
					padding-bottom: 36px;
					img {
						float: left;
						width: 300px;
						height: 186px;
						margin-left: 29px;
						&:first-child {
							margin-left: 0;
						}
					}
				}
			}
			.paging {
				overflow: hidden;
				margin-top: 48px;
				text-align: center;
				.paging-box {
					display: inline-block;
					a {
						float: left;
						width: 38px;
						height: 38px;
						line-height: 38px;
						border: 1px solid $base-border-color;
						color: $deepgray-color;
						text-align: center;
						font-size: $smaller-font-size;
					}
					& > a {
						width: 74px;
					}
					.page-number {
						float: left;
						overflow: hidden;
						margin: 0 6px;
						a {
							border-left: none;
							&:first-child {
								border-left: 1px solid $base-border-color;
							}
							&.active {
								color: #fff;
								background-color: $light-background;
							}
							&.more {
								font-size: $base-font-size;
								border: none;
								border-right: 1px solid $base-border-color;
							}
						}
					}
				}
			}
		}
	}
}


/* 申请分期 */
.apply-divide {
	.banner {
		width: 100%;
		img {
			width: 100%;
		}
	}
	// 介绍
	.introduce {
		width: 800px;
		margin: 48px auto 80px auto;
		.title {
			font: {
				size: $biggest-font-size;
				weight: bold;
			}
			padding-bottom: 8px;
			@include border-bottom();
		}
		.lists {
			margin-top: 24px;
			.list {
				overflow: hidden;
				margin-bottom: 12px;
				img {
					width: 16px;
					margin: 2px 8px 0 0;
					float: left;
				}
				div {
					float: left;
					font-size: $smaller-font-size;
					strong {
						color: $light-color;
						font-size: $base-font-size;
					}
				}
			}
		}
		table {
			text-align: center;
			width: 100%;
			border-collapse: collapse;
			thead {
				background-color: $base-border-color;
				font-size: $smallest-font-size;
				border: 1px solid $base-border-color;
				tr {
					height: 37px;
				}
			}
			tbody {
				font-size: $smaller-font-size;
				tr {
					border-left: 1px solid $base-border-color;
					height: 37px;
					&:hover {
						background-color: $base-background;
					}
					td {
						border-right: 1px solid $base-border-color;
						border-bottom: 1px solid $base-border-color;
						&:first-child {
							font-weight: bold;
							background-color: $base-background;
						}
					}
				}
			}
		}
		.apply {
			overflow: hidden;
			margin-top: 48px;
			font-size: $small-font-size;
			.apply-btn {
				@include btn($width: 400px);
				float: left;
				margin-right: 24px;
				cursor: pointer;
			}
			.more {
				color: $deepgray-color;
				line-height: 44px;
				.phone {
					color: $light-color;
				}
			}
		}
	}
	// 信息填写
	.write-info {
		width: 800px;
		margin: 48px auto 80px auto;
		& > .title {
			font: {
				size: $biggest-font-size;
				weight: bold;
			}
			padding-bottom: 8px;
			@include border-bottom();
		}
		.info-box {
			overflow: hidden;
			.personal-info, .spouse-info {
				float: left;
				.title {
					font-weight: bold;
					margin: 36px 0 24px 0;
					span {
						color: $light-color;
						font-size: $small-font-size;
					}
				}
				.item {
					overflow: hidden;
					margin-top: 12px;
					.name {
						float: left;
						width: 56px;
						margin-right: 12px;
						line-height: 44px;
						font-size: $smaller-font-size;
					}
					input {
						@include inp($width: 280px);
					}
				}
			}
			.personal-info {
				margin-right: 104px;
			}
		}
		button {
			@include btn($width: 400px);
			margin: 48px 0 0 200px;
		}
	}
	// 申请成功
	.apply-success {
		border: 1px solid $base-border-color;
		width: 482px;
		margin: 48px auto 80px auto;
		text-align: center;
		img {
			width: 100px;
			padding: 24px 0 16px 0;
		}
		.congratuation {
			font-weight: bold;
		}
		.notice {
			color: $deepgray-color;
			font-size: $small-font-size;
			padding: 16px 0 25px 0;
		}
	}
}


/* 关于 */
.about-lxf {
	.banner {
		width: 100%;
		img {
			width: 100%;
		}
	}
	.content {
		width: 800px;
		margin: 0 auto;
		& > div {
			overflow: hidden;
			.info, img {
				float: left;
			}
			&.summary {
				margin: 76px 0 95px 0;
				.info {
					width: 520px;
					.title {
						margin-bottom: 24px;
						font: {
							size: $bigger-font-size;
							weight: bold;
						}
						span {
							display: inline-block;
							color: $light-color;
							margin-left: 12px;
						}
					}
					.details {
						font-size: $smaller-font-size;
						line-height: 25px;
					}
				}
				img {
					width: 220px;
					margin-left: 60px;
				}
			}
			&.vision {
				img {
					height: 233px;
				}
				.info {
					display: table;
					height: 233px;
					margin-left: 82px;
					font: {
						size: $bigger-font-size;
						weight: bold;
					}
					.info-box {
						display: table-cell;
						vertical-align: middle;
					}
					.tip {
						color: $light-color;
						margin-top: 16px;
					}
				}
			}
			&.mission {
				margin-top: 80px;
				img {
					height: 126px;
				}
				.info {
					display: table;
					height: 126px;
					margin-right: 40px;
					// margin-top: 54px;
					font: {
						size: $bigger-font-size;
						weight: bold;
					}
					.info-box {
						display: table-cell;
						vertical-align: middle;
					}
					.tip {
						color: $light-color;
						margin-top: 16px;
					}
				}
			}
		}
	}
}